<template>
  <div class="device">
    <ul class="device_ul">
      <li class="device_li">
        <p class="device_li_p">人员名称</p>
        <p class="device_li_p">报警描述</p>
        <p class="device_li_p">公司名称</p>
        <p class="device_li_p">报警时间</p>
      </li>
      <div class="device_b">
        <vue-seamless-scroll
          class="scroll_box"
          :data="data"
          :class-option="defineScroll"
          style="
            height: 100%;
            overflow: hidden;
            width: 100%;
            color: white;
            font-size: 18px;
            text-align: center;
          "
        >
          <li class="device_lis" v-for="(item, index) in data">
            <p class="device_lis_p">{{ item.alarmUserName }}</p>
            <p class="device_lis_p">{{ item.disposeFeedback }}</p>
            <p class="device_lis_p">{{ item.dept_name }}</p>
            <p class="device_lis_p">{{ item.alarmTime }}</p>
          </li>
        </vue-seamless-scroll>
      </div>
    </ul>
  </div>
</template>
<script>
import AutoScroll from "@/components/AutoScroll.vue";
export default {
  props: ["data"],
  components: {
    AutoScroll,
  },

  computed: {
    defineScroll() {
      return {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 10, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleHeight: 0,
        // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        singleWidth: 0,
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
  data() {
    return {};
  },
  mounted() {
    // this.area()
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
.device_ul {
  padding: 0;
  margin: 0;

  li {
    list-style: none;
  }
}

.device_b {
  height: 240px;
  background: url("@/assets/ThreeD/leftcentern.png");
  overflow: hidden;
  position: relative;
}

.device_lis {
  display: flex;
  height: 35px;
  align-items: center;

  .device_lis_p {
    padding: 0;
    margin: 0;
    text-align: center;
    // line-height: 35px;
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 12px;
    color: #ffffff;

    &:nth-child(1) {
      width: 20%;
    }

    &:nth-child(2) {
      width: 20%;
    }

    &:nth-child(3) {
      width: 30%;
    }

    &:nth-child(4) {
      width: 30%;
    }
  }
}

.device_li {
  background: url("@/assets/ThreeD/leftct.png");
  height: 35px;
  display: flex;

  .device_li_p {
    padding: 0;
    margin: 0;
    text-align: center;
    line-height: 35px;
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #ffffff;

    &:nth-child(1) {
      width: 20%;
    }

    &:nth-child(2) {
      width: 20%;
    }

    &:nth-child(3) {
      width: 30%;
    }

    &:nth-child(4) {
      width: 30%;
    }
  }
}
</style>
